<!-- 运营统计 -->
<template>
  <div class="operateStatic">
    <div class="tip">
      <span>截至{{ nowaday }}，年度安全运营天数 <span class="count">3618</span>天
      </span>
    </div>
    <div class="chart-part">
      <div id="operateChart" :style="{ width: '500px', height: '200px' }"></div>
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import * as echarts from "echarts";
import { operateOpts } from "@/cesiumTools/echartsOpts";
import { ref, onMounted } from "vue";

import { getLine } from '@/api/line'

const nowaday = ref(dayjs().format("YYYY/M/DD"));
const dataSource = ref([]);

onMounted(async () => {
  const lineData = await getLine()
  dataSource.value = lineData
  initChart(lineData);
});

const initChart = (dataSource) => {
  const myChart = echarts.init(document.getElementById("operateChart"));
  const data = dataSource.map((item) => ({
    name: item.name,
    value: Number(item.length),
  }));
  const options = operateOpts(data);
  myChart.setOption(options);
};
</script>

<style scoped lang="scss">
.operateStatic {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .tip {
    height: 30px;
    width: 100%;
    font-size: 14px;
    color: #fff;
    text-align: center;
    margin-top: 10px;

    .count {
      font-size: 26px;
      color: #ef9c00;
      letter-spacing: 3px;
    }
  }

  .chart-part {
    flex: 1;
    display: flex;
    pointer-events: all;
    padding-left: 10px;

    #operateChart {
      pointer-events: all;
    }
  }
}
</style>
